<template>
    <div class="transfer">
        <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item :label="$t('msg.转账给')">
                <div class="user_info">
                    <img :src="user.avatar" alt="" class="user_avatar">
                    <div class="user_other">
                        <div class="user_name">{{ user.nickname }}</div>
                        <div class="user_id">ID：{{ user.id }}</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item prop="amount">
                <div class="user_input">
                    <span class="unit">￥</span>
                    <input type="text" v-model="ruleForm.amount">
                </div>
            </el-form-item>

            <el-form-item :label="$t('msg.添加备注')">
                <el-input v-model="ruleForm.remark" :placeholder="$t('msg.请输入备注内容')"></el-input>
            </el-form-item>
            <el-form-item>
                <div class="tips_btn" :class="active ? '' : 'active'" @click="change(false)">{{ $t('msg.即时转账') }}</div>
                <div class="tips_btn" :class="active ? 'active' : ''" @click="change(true)">{{ $t('msg.延时转账') }}</div>
            </el-form-item>


            <div class="form_item" v-if="active">
                <div class="key">{{ $t('msg.生成验证码') }}</div>
                <el-form-item prop="code">
                    <input type="text" v-model="ruleForm.code" :placeholder="$t('msg.收款验证码')">
                </el-form-item>
            </div>


            <el-form-item v-if="active">
                <div class="form_item">
                    <div class="key">{{ $t('msg.延时时间') }}</div>
                    <div class="oper">
                        <i class="el-icon-arrow-left" @click="chang_time(1)"></i>
                        <span>{{ ruleForm.delay_hour }}{{ $t('msg.小时') }}</span>
                        <i class="el-icon-arrow-right" @click="chang_time(2)"></i>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <div class="transfer_footer">
            <el-button type="primary" @click="submit">{{ $t('msg.确定') }}</el-button>
            <el-button type="primary" plain @click="$emit('update:visible', false)">{{ $t('msg.取消') }}</el-button>
        </div>
    </div>
</template>
<script>


export default {
    props: {
        member: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        var validateCode = (rule, value, callback) => {
            value = value.trim();
            if (value === '') {
                callback();
            } else {
                if (/^\d{6}$/.test(value)) {
                    callback();
                } else {
                    callback(new Error(this.$t('msg.数字验证码')));
                }
            }
        };
        return {
            user: {},
            active: false,
            ruleForm: {
                amount: '',
                remark: '',
                delay_hour: 0,
                code: '',
            },

            rules: {
                amount: [
                    { required: true, message: this.$t('msg.请输入转账金额'), trigger: 'blur' },
                    { pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('msg.请输入正确的金额格式'), trigger: 'blur' }
                ],
                code: [
                    { validator: validateCode, trigger: 'blur' }
                ]
            }
        };
    },
    async created() {
        let im_id = this.member.user_id;
        let { user } = await this.$api.chatApi.searchUser({
            im_user_id: im_id
        });
        this.user = user;
        console.log(this.user)
    },
    methods: {
        change(type) {
            this.active = type;
            if (!this.active) {
                this.ruleForm.delay_hour = 0;
                this.ruleForm.code = '';
            };
        },
        chang_time(type) {
            if (type == 1) {
                if (this.ruleForm.delay_hour <= 0) return;
                this.ruleForm.delay_hour--
            } else {
                if (this.ruleForm.delay_hour >= 48) return
                this.ruleForm.delay_hour++
            }
        },
        submit() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let data = {
                        ...this.ruleForm,
                        to_user_id: this.user.id
                    }
                    let res = await this.$api.chatApi.transfer(data);
                    let id = res.transfer_id;

                    this.$emit('ok', {
                        identity: 1, //1:发送人 2接收人
                        transfer_id: id,
                        transfer_price: this.ruleForm.amount,
                        transfer_status: 1,
                        content: this.ruleForm.delay_hour
                    });

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.transfer {
    &:deep(.el-form-item) {
        margin-bottom: 8px;

        .el-form-item__label {
            font-size: 14px;
            color: #333333;
        }

        .el-input__inner {
            height: 52px;
            background: #F5F5F5;
        }
    }

    .user_info {
        background: #F5F5F5;
        border-radius: 8px 8px 8px 8px;
        padding: 8px 12px;
        box-sizing: border-box;
        display: flex;

        .user_avatar {
            width: 52px;
            height: 52px;
            border-radius: 4px 4px 4px 4px;
        }

        .user_other {
            line-height: 1;
            padding: 3px 0 3px 12px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .user_name {
                font-size: 18px;
                color: #333333;
            }

            .user_id {
                font-size: 12px;
                color: #7F7F7F;
            }
        }
    }

    .user_input {
        height: 52px;
        border-radius: 0px 0px 0px 0px;
        border-bottom: 1px solid #EDEDED;

        display: flex;
        align-items: center;

        .unit {
            font-size: 32px;
            color: #333333;
        }

        input {
            flex: 1;
            border: none;
            outline: none;
            height: 100%;
            font-size: 14px;
            color: #333333;
        }

    }

    .tips_btn {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #FFFFFF;
        border-radius: 8px 8px 8px 8px;

        margin-top: 8px;
        background: #2273FF;
        cursor: default;

        &.active {
            background: #FF904A;
        }

        // &.primary {
        //     background: #2273FF;
        // }

        // &.warning {
        //     background: #FF904A;
        // }
    }

    .form_item {
        height: 88px;
        background: #F5F5F5;
        border-radius: 8px 8px 8px 8px;
        padding: 12px 0;
        margin-bottom: 8px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .key {
            font-size: 14px;
            color: #7F7F7F;
        }

        input {
            width: 178px;
            height: 34px;
            text-align: center;
            border: none;
            border-bottom: 1px solid #EDEDED;
            outline: none;
            font-size: 16px;
            color: #FF904A;
            background: #F5F5F5;
        }

        .oper {
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                font-size: 16px;
                color: #FF904A;
                margin: 0 22px;
            }
        }
    }

    .transfer_footer {
        margin-top: 30px;
        display: flex;
        justify-content: center;

        .el-button {
            width: 118px;
            height: 32px;
        }
    }
}
</style>